<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      :modal="true"
      top="10vh"
      width="500px"
      @closed="closed"
    >
      <el-form ref="poiForms" :model="poiForm" :rules="rules">
        <el-form-item label-width="100px" label="标签" prop="label">
          <el-input v-model="poiForm.label" placeholder="请输入标签" autocomplete="off" />
        </el-form-item>
        <el-form-item label-width="100px" label="标识" prop="code">
          <el-input v-model="poiForm.code" placeholder="请输入标识" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="坐标类型" prop="coordType">
          <el-select v-model="poiForm.coordType" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in coordTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label-width="100px" label="样式类型" prop="type">
          <el-select v-model="poiForm.type" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label-width="100px" label="特效" prop="effect" v-if="poiForm.type=='2'">
            <vue-json-editor
                    v-model="poiForm.effect"
                    :showBtns="false"
                    :mode="'code'"
                    lang="zh"
                    :expandedOnStart="true"
                   />
        </el-form-item>

        <el-form-item label-width="100px" label="经纬度" prop="coord">
          <el-input v-model="poiForm.coord" placeholder="请输入经度" autocomplete="off" />
        </el-form-item>
        <el-form-item label-width="100px" label="高度类型" prop="coordZType">
          <el-select v-model="poiForm.coordZType" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in coordZTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="高度" prop="coordZ">
          <el-input-number v-model="poiForm.coordZ"   label="请输入高度" style="width: 100%;"></el-input-number>
        </el-form-item>
        <el-form-item label-width="100px" label="显示范围" prop="showLabelRange">
          <el-input v-model="poiForm.showLabelRange" placeholder="请输入显示范围(如:0,2000)" autocomplete="off" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import vueJsonEditor from 'vue-json-editor'

import {
  saveScenePoi,
  getScenePoiById
} from '@/api/51world/sceneSrcPoi.js'
import {
  isOk
} from '@/utils/request'
export default {
  name: 'PoiInfoDialog',
  components: { vueJsonEditor },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      title: '',
      buttonLoading: false,
      poiForm: {
        id: '',
        sceneId:'',
        srcId:'',
        label: '',
        code:'',
        coordType:0,
        coord: '',
        coordZ: 0,
        type: '0',
        coordZType: 0,
        showLabelRange: '0,2000',
        effect:{}
      },
      coordTypeOptions:[
        {
          value: 0,
          label: '经纬度坐标'
        },
        {
          value: 1,
          label: 'cad坐标'
        }
      ],
      coordZTypeOptions:[
        {
          value: 0,
          label: '相对3D世界表面'
        },
        {
          value: 1,
          label: '相对3D世界地面'
        },
        {
          value: 2,
          label: '相对3D世界海拔'
        },
      ],
      typeOptions:[
        {
          value: '0',
          label: '自定义'
        },
        {
          value: '1',
          label: '内置'
        },
        {
          value: '2',
          label: '特效'
        },
      ],
      rules: {
        label: [{
          required: true,
          message: '请输入标签',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 50,
          message: '长度在 2 到 50 个字符',
          trigger: 'blur'
        }
        ],
        coord: [{
          required: true,
          message: '请输入经纬度',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 50,
          message: '长度在 2 到 50 个字符',
          trigger: 'blur'
        }
        ],
        coordZ: [{
          required: true,
          message: '请输入高度',
          trigger: 'blur'
        }
        ]
      }
    }
  },
  computed: {

  },
  watch: {
    dialogVisible: {
      handler: function(value) {
        this.visible = value
      },
      immediate: true,
      deep: false
    },
    dialogData: {
      handler: function(nValue) {
        if (nValue) {
          if(nValue.id){
             this.title = '编辑'
          }else{
            this.title = '新增'
          }

          this.poiForm.id = nValue.id || ''
           this.poiForm.sceneId = nValue.sceneId || ''
          this.poiForm.srcId = nValue.srcId || ''
          this.poiForm.label = nValue.label || ''
          this.poiForm.code = nValue.code || ''
          this.poiForm.coordType = nValue.coordType || 0
          this.poiForm.coord = nValue.coord || ''
          this.poiForm.coordZ = nValue.coordZ || 0
          this.poiForm.coordZType = nValue.coordZType || 0
          this.poiForm.showLabelRange = nValue.showLabelRange || '0,2000'
          this.poiForm.type = nValue.type || '0'
          this.poiForm.from = nValue.from || '0'

          if(nValue.effect){
            this.poiForm.effect =JSON.parse(nValue.effect)  || {}
          }else{
            this.poiForm.effect ={}
          }
        }
        else{
           this.title = '新增'
        }
      },
      immediate: true,
      deep: false
    }
  },
  mounted: function() {
  },
  created() {
    if(this.poiForm.id){
      this.getScenePoiById();
    }
  },
  methods: {
    submitForm: function() {
      this.$refs.poiForms.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          this.poiForm.effect=JSON.stringify(this.poiForm.effect);

          saveScenePoi(this.poiForm).then(rsp => {
            if (isOk(rsp)) {
                this.$message({
                  type: 'success',
                  message: '成功!'
                })
              this.buttonLoading = false
              this.closed()
            }
          })
          this.poiForm.effect=JSON.parse(this.poiForm.effect)
        }
      })
    },
    getScenePoiById(){
      this.buttonLoading = true
      getScenePoiById({
        id:this.poiForm.id
      }).then(rsp => {
        if (isOk(rsp)) {
          const nValue=rsp.data;
          this.poiForm.id = nValue.id || ''
          this.poiForm.srcId = nValue.srcId || ''
          this.poiForm.label = nValue.label || ''
          this.poiForm.code = nValue.code || ''
          this.poiForm.coordType = nValue.coordType || 0
          this.poiForm.coord = nValue.coord || ''
          this.poiForm.coordZ = nValue.coordZ || 0
          this.poiForm.coordZType = nValue.coordZType || 0
          this.poiForm.showLabelRange = nValue.showLabelRange || '0,2000'
          this.poiForm.type = nValue.type || '0'
          this.poiForm.from = nValue.from || '0'
          if(nValue.effect){
            this.poiForm.effect =JSON.parse(nValue.effect)  || {}
          }else{
            this.poiForm.effect ={}
          }
          this.buttonLoading = false
        }
      })
    },
    closed: function() {
      this.$emit('closed', false)
    }
  }
}
</script>

<style lang="scss">
  .info-dialog {

  }
</style>
